<template>
	<view class="library">
		<view class="item" v-for="(item,index) in listinfo" :key="index" @click="gotopage(item.id)">
			<view class="left">
				<view class="libraryimg">
					<image :src="item.imgUrl" mode=""></image>
				</view>
			</view>
			<view class="content">
				<view class="libraryname">{{item.name}}</view>
				<view class="address">{{item.address}}</view>
			</view>
			<view class="right">
				<view class="businessStatus">
					<view v-if="item.businessState==='1'">营业中</view>
					<view v-else>暂停营业</view>
				</view>
				<view class="businessHours">{{item.businessHours}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		libraryList
	} from '../../api/library'
	import libraryData from '../../common/librarydata'
	import {
		baseurl
	} from '../../api/request'
	import librarydata from '../../common/librarydata'
	export default {
		data() {
			return {
				listinfo: []
			}
		},
		methods: {
			gotopage(id) {
				uni.navigateTo({
					url: `/pages/library/details/details?id=${id}`
				})
			}
		},
		async created() {
			let res = await libraryList({
				header: {
					"Authorization": uni.getStorageSync('token')
				},
				data: {}
			});
			console.log(res);
			if (res.code == 200) {
				this.listinfo = res.rows.map(item => {
					return {
						address: item.address,
						businessHours: item.businessHours,
						name: item.name,
						imgUrl: baseurl + item.imgUrl,
						businessState: item.businessState,
						id: item.id
					}
				})
				// console.log(this.listinfo); //存储的图书馆信息 

				// 对列表按照businessState进行排序，营业中的排前面  
				this.listinfo.sort((a, b) => b.businessState - a.businessState);
			} else {
				console.log(librarydata.libraryData);
				this.listinfo = librarydata.libraryData.rows.map(item => {
					return {
						address: item.address,
						businessHours: item.businessHours,
						name: item.name,
						imgUrl: item.imgUrl,
						businessState: item.businessState,
						id: item.id
					}
				})
				this.listinfo.sort((a, b) => b.businessState - a.businessState);
			}
		}
	}
</script>

<style scoped>
	.item {
		padding: 30rpx;
		display: flex;
		line-height: 2;
		background-color: #fff;
	}

	.libraryname {
		font-size: 18px;
	}

	.content {
		min-width: 0;
		flex: 1;
		margin-left: 10px;
	}

	.libraryimg {
		width: 140rpx;
		height: 140rpx;
		background-color: #797d82;
	}

	.libraryimg image {
		width: 100%;
		height: 100%;
	}

	.right {
		width: 140rpx;
		margin-left: 20rpx;
		font-size: 16px;
		line-height: 2.3;
		text-align: center;
	}

	.address {
		font-size: 16px;
		color: #797d82;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.businessStatus {
		font-size: 16px;
		color: red;
	}

	.businessHours {
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>